<template>
  <div class="hello">
    <div>
      <x-header>标题</x-header>
    </div>
    <div>
      <group>
        <x-input title="用户名" v-model="username" placeholder="手机号/会员号" placeholder-align="right">
          <img slot="label" style="padding-right:10px;padding-left:30px;display:block;" src="./../assets/images/user.png" width="30" height="24">
        </x-input>
        <x-input title="密码" v-model="password" type="password" placeholder="密码" placeholder-align="right">
          <img slot="label" style="padding-right:10px;padding-left:30px;display:block;" src="./../assets/images/密码.png" width="30" height="24">
        </x-input>
      </group>
      <group>
        <x-button type="primary" @click.native="login">submit</x-button>
      </group>
    </div>
    <div class="register">
      <div>
        <divider>其他登录方式</divider>
        <img slot="label"  src="./../assets/images/qq.png" width="30" height="24">
        <img slot="label"  src="./../assets/images/alipay.png" width="30" height="24">
        <img slot="label"  src="./../assets/images/qq.png" width="30" height="24">
        <img slot="label"  src="./../assets/images/alipay.png" width="30" height="24">
      </div>
      <div>
        <a href="#">注册</a>
      </div>
    </div>
  </div>
</template>

<script>

import { GroupTitle, Group, Cell, XInput, XButton, Divider, XHeader } from 'vux'
export default {
  name: 'Login',
  components: {
    XHeader,
    Group,
    GroupTitle,
    Cell,
    XInput,
    Divider,
    XButton
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      var title = '提示'
      var content = ''

      if (this.username === '' || this.password === '') {
        content = '用户名或者密码不为空'
      } else {
        let param = new URLSearchParams()
        param.append('username', this.username)
        param.append('password', this.password)
        console.log(this)
        var that = this
        this.$ajax({
          method: 'post',
          url: '/user/queryUser',
          data: param
        })
          .then(function (response) {
            if (response.status === 200) {
              var data = response.data
              that.$store.commit({
                type: 'addUser',
                data: data
              })
            } else {
              content = '用户名或者密码错误'
            }
            console.log(response)
          })
          .catch(function (response) {
            content = '用户名或者密码错误'
          })
      }
      if (content === '') {
        this.$router.push('/home')
      } else {
        this.$vux.alert.show({
          title: title,
          content: content,
          onShow () {
          },
          onHide () {
          }
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  text-align: center;
}
.register {
  text-align: center;
  padding-top: 120px;
}
.register a {
  padding: 5px;
  text-decoration:none;
}
.register img {
  padding: 5px;
}
</style>
